
<template>
  <div class="selectionVideo">
    <div class="divBox" v-for="(item,index) in selection_list" :key="index">
        <div class="items">
            <img :src="item.srcUrl"/>
            <div class="videoInformation">
                <p class="playback">{{ item.playback }}</p>
                <p>{{ item.timer }}</p>
            </div>
            <h4 class="title">{{ item.title }}</h4>
            <div class="user">
                <p class="username"><span></span><span>{{ item.user }}</span></p>
                <p class="like">{{ item.like }}</p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'selectionVideo',
  data(){
    return{
      selection_list:[
        {id:1,title:'国内跑道数量最多的6个机场',srcUrl:require('@/assets/images/tabVideo/tabVideo1.jpg'),playback:'8.1w次播放',timer:'00:24',user:'航旅纵横',like:'1447'},
        {id:2,title:'出门旅游啦！！你们猜我这是来到那里~',srcUrl:require('@/assets/images/tabVideo/tabVideo2.jpg'),playback:'141.1w次播放',timer:'00:43',user:'慕寒m',like:'1.4w'},
        {id:3,title:'一个人在南美洲的年夜饭，回顾下2020旅游行程',srcUrl:require('@/assets/images/tabVideo/tabVideo3.jpg'),playback:'1.3w次播放',timer:'11:49',user:'她的旅途',like:'353'},
        {id:4,title:'达人秀：面对导师的肯定，小姐姐深鞠一躬',srcUrl:require('@/assets/images/tabVideo/tabVideo4.jpg'),playback:'74.8w次播放',timer:'02:49',user:'灿星音乐秀',like:'3073'},
        {id:5,title:'国内14座4F级机场，你去过几个？',srcUrl:require('@/assets/images/tabVideo/tabVideo5.jpg'),playback:'5.3w次播放',timer:'00:28',user:'航旅纵横',like:'1199'},
        {id:6,title:'小丑竟是我自己...',srcUrl:require('@/assets/images/tabVideo/tabVideo6.jpg'),playback:'2.9w次播放',timer:'00:38',user:'首都航空',like:'220'},
        {id:7,title:'小品：韩庚飞机上遇到欧弟假装不认识自己就算了，还摆谱',srcUrl:require('@/assets/images/tabVideo/tabVideo7.jpg'),playback:'202.8w次播放',timer:'04:15',user:'综艺轨迹',like:'5545'},
        {id:8,title:'西藏318国道怒江大桥，有一座特殊的桥墩，路过的车辆都会鸣笛',srcUrl:require('@/assets/images/tabVideo/tabVideo8.jpg'),playback:'8.1w次播放',timer:'00:44',user:'旅行者小多',like:'7812'},
        {id:9,title:'东航天府首行',srcUrl:require('@/assets/images/tabVideo/tabVideo9.jpg'),playback:'8.1w次播放',timer:'00:24',user:'航旅圈',like:'472'},
        {id:10,title:'万里挑一！航天员的训练项目都有哪些？',srcUrl:require('@/assets/images/tabVideo/tabVideo10.jpg'),playback:'6.1w次播放',timer:'01:24',user:'航空知识',like:'365'},
        {id:11,title:'春春：贾玲不知道乐华七子还有个英文名，彻底被整懵，贼逗',srcUrl:require('@/assets/images/tabVideo/tabVideo11.jpg'),playback:'7.9w次播放',timer:'00:24',user:'优酷超级娱乐',like:'1424'},
        {id:12,title:'又是为自己智商感到堪忧的一天',srcUrl:require('@/assets/images/tabVideo/tabVideo12.jpg'),playback:'4.5w次播放',timer:'03:24',user:'首都航空',like:'286'},
        {id:13,title:'是心动啊，糟糕眼神躲不掉',srcUrl:require('@/assets/images/tabVideo/tabVideo13.jpg'),playback:'3.3w次播放',timer:'00:56',user:'首都航空',like:'725'},
    ],
    }
  },
  created(){

  },
  methods:{

  }
} 
</script>

<style scoped>
.selectionVideo{
  width: 360px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: 12px;
}
.divBox{
    width: 175px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    margin-bottom: 10px;
    text-align: left;
    position: relative;
    margin-right: 4px;
}
.items img{
    width: 170px;
    height: 215px;
    border-radius: 10px 10px 0 0;
}
.videoInformation{
    width: 155px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 180px;
    color: white;
    margin-left: 5px;
    font-size: 10px;
    padding: 0 5px;
}
.title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 5px;
    font-size: 14px;
}
.user{
    width: 165px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    margin-left: 5px;
    font-size: 14px;
}
.username{
    color: #939393
}
.like{
    color: #888888;
}
.divBox:last-child{
  margin-bottom: 70px;
}
</style>
